﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
    <link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
    <link href="Content/ui.textbox.css" type="text/css" rel="stylesheet" media="all" />
    <link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
    <link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
    <link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.form.js" type="text/javascript"></script>
    <script src="Scripts/ui.textbox.js" type="text/javascript"></script>
    <script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>
<!-- InstanceBeginEditable name="pageStyles" -->
<style type="text/css">
    div.avatar
    {
        float: left;
        width: 55px;
    }
</style>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="pageScripts" -->
<script src="Scripts/jquery.quickpaginate.js" type="text/javascript"></script>
<script type="text/javascript">
    //************* URL常量
    var URL_ = "";
    //************* 全局变量
    var g_Var = {
        "staffList": null
    };



    //************* 常量定义
    var StaticResource = {
};




//************* Accessor访问器
var EzAccessor = {};
function CreateAccessor() {
    if (ezmock.IS_MOCKED) {
        EzAccessor = CreateMockEzAccessor();

    } else {
        EzAccessor = CreateRealEzAccessor();
    }
}



function CreateMockEzAccessor() {
    var mock_allStaffs = [
    {
        "TargetUser": { "Id": "0c9d7c0c-04a5-4ae2-97a1-d7bbc38f5c66",
            "Name": "杨裕欣", "UserName": "yuxin",
            "Dept": {
                "Id": "111",
                "DeptName": "软件工程部",
                "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
            }
        },
        "StaffInfo": { "QqNumber": "229512924",
            "MobileNo": "18801963408",
            "MainEmail": "meteor1211@gmail.com"
        }
    },
    {
        "TargetUser": { "Id": "0c9d7c0c-04a5-4ae2-97a1-d7bbc38f5c66",
            "Name": "杨欣", "UserName": "yuxin",
            "Dept": {
                "Id": "222",
                "DeptName": "设计",
                "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
            }
        },
        "StaffInfo": { "QqNumber": "229512924",
            "MobileNo": "18801963408",
            "MainEmail": "meteor1211@gmail.com"
        }
    }];



    var mock_deptList = [

            {
                'Id': '111',
                'DeptName': '软件工程'

            },

            {
                'Id': '222',
                'DeptName': '策划'
            },

            {
                'Id': '333',
                'DeptName': '设计'
            }

        ];

    //模拟实现服务器交互方法
    var mockEzAccessor = {
        "getAllStaffInfo": function () {
            return mock_allStaffs;
        },
        "getDeptList": function () {
            return mock_deptList;
        }
    };

    return mockEzAccessor;
}


function CreateRealEzAccessor() {
    //实现服务器交互方法
    var realEzAccessor = {
        "getAllStaffInfo": function () {
            //return <%= ViewData["AllStaffInfo"] %>;
        },
        "getDeptList": function () {
            //return <%= ViewData["DeptList"] %>; 
        }

    };

    return realEzAccessor;
}

function dealEmptyValue(str) {
    if (str == null) {
        str = "";
    }

    return str;
}


function bindStaffList(staffList) {
    $('#cmbStaffList').empty();

    if (staffList.length != 0) {
        for (var key in staffList) {
            var ListDom = $('<li></li>');
            var avatarDom = '<div class="avatar"><img src="/core/headicon/{userId}" style="width:54px;heigth:54px;"></img></div>';
            var staffDiv = '<div style="margin:5px;border-bottom:1px solid #EBEBEB; margin-left: 65px;"><div class="userName" style="background:none repeat scroll 0 0 #F7F7F7;"><a href="#">{userName} ({deptName})</a></div><div class="staffContent"><p>QQ : {qqNumber}</p><p>手机: {mobileNo}</p><p>邮箱: {email}</p></div></div>';

            var userId = staffList[key].TargetUser.Id;
            var userName = staffList[key].TargetUser.Name;
            var deptName = staffList[key].TargetUser.Dept.DeptName;
            var qqNumber = staffList[key].StaffInfo.QqNumber;
            var mobileNo = staffList[key].StaffInfo.MobileNo;
            var mainEmail = staffList[key].StaffInfo.MainEmail;

            avatarDom = avatarDom.replace("{userId}", userId);

            staffDiv = staffDiv.replace("{userName}", userName)
                               .replace("{qqNumber}", dealEmptyValue(qqNumber))
                               .replace("{deptName}", deptName)
                               .replace("{mobileNo}", dealEmptyValue(mobileNo))
                               .replace("{email}", dealEmptyValue(mainEmail));

            ListDom.append(avatarDom);
            ListDom.append(staffDiv);
            $('#cmbStaffList').append(ListDom)
        }

    } else {
        var staffDiv = '<div style="text-align:center;"><p>暂时还没有通讯录</p></div>';
        $('#cmbStaffList').append(staffDiv);

    }
}



function bindUserStaffThisDept(deptId) {
    var userStaffList = [];
    for (var key in g_Var.staffList) {
        if (g_Var.staffList[key].TargetUser.Dept.Id == deptId) {
            userStaffList.push(g_Var.staffList[key]);
        }
    }

    bindStaffList(userStaffList);
    bindQuickPage();
}



function bindDeptList(deptList) {

    for (var key in deptList) {
        var deptName = deptList[key].DeptName;
        var deptId = deptList[key].Id;
        var deptNameDom = '<a class="indent" onclick="bindUserStaffThisDept(\'{deptId}\')">{deptName}</a><br/>';
        deptNameDom = deptNameDom.replace("{deptId}", deptId)
                                 .replace("{deptName}", deptName);

        $('#cmbDeptList').append(deptNameDom);
    }

}

function bindQuickPage() {
    //分页
    $("#pageCount").empty();
    $("#cmbStaffList li").quickpaginate({ perpage: 4, showcounter: true, pager: $("#pageCount") });

}







function initPage() {
    EzTipsManager.addTipBox('#tip_remind', 'tipRemind');
    EzTipsManager.showTipBox('tipRemind');

    CreateAccessor();
    g_Var.staffList = EzAccessor.getAllStaffInfo();
    var deptList = EzAccessor.getDeptList();

    //全部通讯录
    bindStaffList(g_Var.staffList);
    //部门列表
    bindDeptList(deptList);
    //分页
    bindQuickPage();
}


function initPageEvent() {
    $('#cmbEveryone').click(function () {
        bindStaffList(g_Var.staffList);
        bindQuickPage();
    });
}



$(function () {
    initPage();
    initPageEvent();
});
</script>
<!-- InstanceEndEditable -->
Z
<body class="alt">
    <div id="root">
        <div id="headw">
            <div id="head">
                <!-- InstanceBeginEditable name="pageHead" -->
                <p>
                    早上好，杨裕欣(软件工程部)
                </p>
                <div id="status-bar">
                    <span><a href="#">设置</a></span>&nbsp; 魏玛软件出品
                </div>
                <!-- InstanceEndEditable -->
            </div>
        </div>
        <div id="main">
            <div id="contentw">
                <div id="content-page">
                    <!-- InstanceBeginEditable name="pageContent" -->
                    <div id="page-head">
                        <img src="Content/icons/contactBook.png" style="width: 48px; height: 48px;" alt="contactBook" />
                        <span>通讯录</span>
                    </div>
                    <div id="page-body">
                        <div style="width: 500px;">
                            <div style="margin: 10px auto; text-align: left;">
                                <ul id="cmbStaffList">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="page-submit">
                        <div id="pageCount">
                        </div>
                    </div>
                    <!-- InstanceEndEditable -->
                </div>
                <div id="content-foot">
                    <small>这个是内容下面的脚注</small></div>
            </div>
            <div id="tipsw">
                <!-- InstanceBeginEditable name="pageShortcut" -->
                <div id="shortcuts" class="box">
                </div>
                <!-- InstanceEndEditable -->
                <div id="tips" class="box">
                </div>
            </div>
            <div class="clearfloat">
            </div>
        </div>
    </div>
    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_remind" style="display: none; min-height: 130px;">
        <h1>
            按部门过滤</h1>
        <div id="cmbDeptList">
            <a id="cmbEveryone" class="indent">所有员工</a><br />
        </div>
    </div>
    <!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd -->
</html>
